<template>
    <div>
        <div class="outmain ba_f heighthv pad_20 bor_rad5">
            <div class="shuju_title mar_b20">
                <div class="shuju_title_text">
                    <span>创建新客立减</span>
                </div>
            </div>
            <div class="mar_t20 flex-bet flex-y-top">
                <div class="flex-g-1">
                    <el-form ref="form" :model="form" label-width="180px">
                        <el-form-item label="活动名称" :required='true' prop="name">
                            <el-input v-model="form.name" placeholder="请输入活动名称"></el-input>
                        </el-form-item>
                        <el-form-item label="活动时间">
                            <el-date-picker
                                    v-model="timeData"
                                    type="datetimerange"
                                    align="right"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    :default-time="['08:00:00', '20:00:00']">
                            </el-date-picker>
                        </el-form-item>
                        <el-form-item label="新客立减" :required='true' prop="money">
                            <el-input v-model="form.money" placeholder="请输入立减金额" type="number">
                                <template slot="append">元</template>
                            </el-input>
                        </el-form-item>
<!--                        <el-form-item label="可用门店">-->
<!--                            <el-radio-group v-model="form.useType">-->
<!--                                <el-radio label="1" disabled>仅本店可用</el-radio>-->
<!--                                <el-radio label="2" disabled>全店通用</el-radio>-->
<!--                                <el-radio label="3" disabled>指定门店可用</el-radio>-->
<!--                            </el-radio-group>-->
<!--                        </el-form-item>-->
                    </el-form>
                </div>
                <div class="flex-g-0 pad_lr_20">
                    <div class="fon_16">常见问题</div>
                    <el-collapse v-model="collapseName" accordion class="mar_tb10" style="width: 260px">
                        <el-collapse-item title="什么是门店新客立减？" name="1">
                            <div>针对门店新用户进行的立减活动，用户在下单时可叠加使用券、满减活动、门店新客立减。</div>
                        </el-collapse-item>
                        <el-collapse-item title="为什么要做门店新客立减？" name="2">
                            <div>提高新客转化：设置门店新客立减后，可提升新用户下单转化率</div>
                        </el-collapse-item>
                        <el-collapse-item title="哪些用户可以享受门店新客立减" name="3">
                            <div>首次在门店下单的用户将作为门店新用户享受该优惠</div>
                        </el-collapse-item>
                    </el-collapse>
                    <div class="fon_16 mar_t20">活动规则</div>
                    <div class="color_9 mar_t10 lh30 fon_13">
                        <div>1.活动仅限在线支付订单；</div>
                        <div>2.活动成本由商家承担，与店铺其他活动默认同享</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mar_t20 ba_f pad_20 t_c">
            <el-button type="primary" @click="submitForm">立即创建</el-button>
        </div>
    </div>
</template>
<script>
    import {saveNewReduction,getsaveNewReduction} from "@/api/plug";
    import {changeDate} from "@/utils/index";


    export default {
        created() {
            if (this.$route.query.id) {
                this.id = this.$route.query.id
                this.edit()
            }
        },
        data() {
            return {
                form: {
                    name: '',
                    money: '',
                    useType: '1',
                },
                timeData: [new Date(),new Date().setMonth(new Date().getMonth() + 3)],
                collapseName:'',
            }
        },
        methods: {
            async edit(){
                const {data} = await getsaveNewReduction({id: this.id})
                this.form2 = this.form
                this.form = Object.assign(this.form2, data);
                if(data.startTime){
                    this.timeData = [data.startTime,data.endTime]
                }
            },
            async submitForm() {
                this.$refs["form"].validate(async (valid) => {
                    if (valid) {
                        if(this.timeData){
                            this.form.startTime  = changeDate(this.timeData[0]);
                            this.form.endTime = changeDate(this.timeData[1]);
                        }
                        const {msg} = await saveNewReduction(this.form);
                        this.$baseMessage(msg, "success");
                        this.$router.go(-1)
                    } else {
                        return false;
                    }
                });
            },
        }
    }
</script>
